<template>
  <div>
    <v-header :title="$t('message.OrderDetail_deliveryInfo')"
              @back="goBack"></v-header>
    <div class="order">
      <div class="big-title">{{$t('message.OrderDetail_complete')}}</div>

      <div v-if="isTakeaway">
        
        <div class="info"
             v-if="isUseNewAddress">
          <div class="title">
            {{$t('message.OrderDetail_address')}}
          </div>
          <div class="info-wrapper">
            <div class="info-title"> {{$t('message.OrderDetail_location')}} <span>(*)</span></div>
            <input v-model="user.street" />
          </div>
          <!-- <div class="info-wrapper">
            <div class="info-title">{{$t('message.OrderDetail_zipcode')}} <span>(*)</span></div>
            <input v-model="user.postalCode" />
          </div> -->
          <!-- <div class="info-wrapper">
            <div class="info-title">{{$t('message.OrderDetail_city')}}<span>(*)</span></div>
            <input v-model="user.city" />
          </div> -->
          <div class="info-wrapper">
            <div class="info-title">{{$t('message.OrderDetail_building')}}<span>(*)</span></div>
            <input v-model="user.stairs" />
          </div>
          <div class="info-wrapper">
            <div class="info-title">{{$t('message.OrderDetail_layer')}}<span>(*)</span></div>
            <input v-model="user.floor" />
          </div>
          <div class="info-wrapper">
            <div class="info-title">{{$t('message.OrderDetail_email')}}<span>(*)</span></div>
            <input v-model="user.door" />
          </div>
        </div>
        <div class="info">
          <div class="title">
            <!-- {{$t('message.OrderDetail_yourcontactinformation')}} -->
          </div>
          <div v-if="isUseNewAddress">
             <div class="info-wrapper">
              <div class="info-title">{{$t('message.OrderDetail_name')}}<span>(*)</span></div>
              <input v-model="user.name" />
            </div>
            <!-- <div class="info-wrapper">
              <div class="info-title">{{$t('message.OrderDetail_email')}}</div>
              <input v-model="user.email" />
            </div> -->
            <div class="info-wrapper">
              <div class="info-title">{{$t('message.OrderDetail_thephonenumber')}} <span>(*)</span></div>
              <input v-model="user.phone" />
            </div>
            <!-- <div class="info-wrapper">
              <div class="info-title">{{$t('message.OrderDetail_unit')}}</div>
              <input v-model="user.company" />
            </div> -->
            <div class="save-remark">
              <div class="save"
                   @click="isSaveInfo = !isSaveInfo">
                <img v-if="isSaveInfo"
                     src="../../../static/imgs/save_checked.png">
                <img v-else
                     src="../../../static/imgs/save_check.png">
              </div>
              <span>{{$t('message.OrderDetail_savetheinformation')}}</span>
            </div>
          </div>
          <div v-else>
            <div class="address-wrapper">
              <div class="address-img">
                <img src="../../../static/imgs/address.png">
              </div>
              <div class="address-info">
                <div class="address">{{user.street}} {{user.stairs}} {{user.floor}} {{user.door}}
                  {{user.postalCode}},{{user.city}}
                </div>
                <div class="name-phone">{{user.name}} {{user.phone}}</div>
              </div>
            </div>
            <div class="new-btn"
                 @click="isUseNewAddress = true">{{$t('message.OrderDetail_theordernote')}}</div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="info">
          <div class="title">
            {{$t('message.OrderDetail_yourcontactinformation')}}
          </div>
          <div>
            <div class="info-wrapper">
              <div class="info-title"> {{$t('message.OrderDetail_name')}} <span>(*)</span></div>
              <input v-model="user.name" />
            </div>
            <div class="info-wrapper">
              <div class="info-title"> {{$t('message.OrderDetail_thephonenumber')}} <span>(*)</span></div>
              <input v-model="user.phone" />
            </div>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="remark">
          <div class="remark-title">{{$t('message.OrderDetail_theordernote')}}<span>(*)</span></div>
          <textarea v-model="remarks"
                    :placeholder="$t('message.OrderDetail_demand')" />
          <div class="save-remark">
            <div class="save"
                 @click="isSaveRemark = !isSaveRemark">
              <img v-if="isSaveRemark"
                   src="../../../static/imgs/save_checked.png">
              <img v-else
                   src="../../../static/imgs/save_check.png">
            </div>
            <span>{{$t('message.OrderDetail_savetheinformation')}}</span>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="title">
          {{$t('message.OrderDetail_termofpaymen')}}
        </div>
        <div class="pay-way">
          <div class="way-wrapper"
              v-for="(item, index) in payWay"
               @click="selectPayWay(index)"
               :key="index">
            <div class="left">
              <div class="icon">
                <img v-if="selectedIndex === index"
                     src="../../../static/imgs/checked.png"
                     width="100%"
                     height="100%">
                <img v-else
                     src="../../../static/imgs/check.png"
                     width="100%"
                     height="100%">
              </div>
              <div class="left-name">{{item.name}}</div>
            </div>
            <div class="logo">
              <img :src="item.img"
                   width="100%"
                   height="100%">
            </div>
          </div>
        </div>
        <div class="pay-cost">
          <div class="pay-cost-title">{{$t('message.OrderDetail_theamountof')}}:{{$t('message.Order_shipping')}}</div>
          {{$t('message.OrderDetail_passend')}}: {{shopInfo.currencydefault}} {{payTotalPrice}}
        </div>
      </div>
      <div class="make-order">
        <button class="btn" @click="makeOrder" :disabled="!totalCount">
          {{$t('message.OrderDetail_submitorders')}}
      </button>
        <div class="privacy">{{$t('message.OrderDetail_theamountof')}} </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../Common/Header'
import { Toast } from 'vant'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Detail',

  data () {
    return {
      payWay: [
        {
          name: 'En Espèces/Contanti/Satispay/PayPal',
          type: 'cash',
          img: require('../../../static/imgs/cash.png')
        },
        {
          name: 'Carte di credito/Bancomat',
          type: 'card',
          img: require('../../../static/imgs/visa.png')
        }
      ],
      selectedIndex: '',
      user: {},
      isSaveInfo: false,
      isSaveRemark: false,
      isUseNewAddress: false,
      remarks: ''
    }
  },

  props: {
    discount: {
      type: Number
    },
    shopInfo: {
      type: Object
    }
  },

  components: {
    'vHeader': Header
  },

  created () {

    let lan = localStorage.getItem("lan");
    if(lan){
      this.$i18n.locale = lan
    }

    if (localStorage.getItem('user')) {
      this.user = JSON.parse(localStorage.getItem('user'))
    } else {
      this.isUseNewAddress = true
    }
    this.remarks = localStorage.getItem('remarks') ? JSON.parse(localStorage.getItem('remarks')) : ''
  },

  watch: {},

  computed: {
    ...mapState([
      'isTakeaway', 'cartFoods'
    ]),
    ...mapGetters([
      'totalPrice', 'totalCount'
    ]),
    //  折扣后总价格
    totalPriceByDiscount () {
      if (this.discount === 0) {
        return this.totalPrice
      } else {
        return (this.totalPrice - (this.discount * this.totalPrice).toFixed(2)).toFixed(2)
      }
    },
    //  支付价格
    payTotalPrice () {
      if (!this.isTakeaway || this.totalPrice >= +this.shopInfo.personcost) {
        return this.totalPriceByDiscount
      } else {
        return parseFloat(this.shopInfo.personcost).toFixed(2)
      }
    },
  },

  filters: {},

  methods: {
    ...mapMutations([
      'EMPTY'
    ]),
    //  返回
    goBack () {
      this.$router.go(-1)
    },
    //  选择支付方式
    selectPayWay (index) {
      this.selectedIndex = index
    },
    //  下单
    makeOrder () {
      let foodList = []
      this.cartFoods.filter(item => item.num !== 0).forEach(food => {
        foodList.push(
          {
            goods_id: food.id,
            goods_nums: food.num,
            goods_remak: food.note ? food.note : '',
            goods_price: food.cost,
            option: food.specials ? food.specials.toString() : '',
            optionid: food.optionId ? food.optionId : '',
          }
        )
      })
      if (this.selectedIndex === '') {
        Toast('Bitte wählen Sie die Zahlungsart!');
        // return
      }
      console.log(this.user)
      if (this.user.street == '') {
        Toast('Bitte geben Sie die block ein!');
        console.log('街区不为空')
        return //街区不为空
      } else
        if (this.user.stairs == '') {
          Toast('Bitte geben Sie Ihren building ein!');
          console.log('楼号不为空')
          return //楼号不为空
        } else
          if (this.user.floor == '') {
            Toast('Bitte geben Sie Ihren floor ein!');
            console.log('楼层不为空')
            return //楼层不为空
          } else
            if (this.user.door == '') {
              Toast('Bitte geben Sie Ihren house ein!');
              console.log('门牌号不为空')
              return //门牌号不为空
            }
      if (this.payWay[this.selectedIndex].type == '') {

      }


      if (!this.user.name) {
        // Toast('Bitte geben Sie Ihren Namen ein!');
        // return
      } else if (!this.user.phone) {
        Toast('Bitte geben Sie Ihre Telefonnummer ein!');
        return
      }
      if (this.isTakeaway) {
        if (!this.user.postalCode) {
          this.user.postalCode = '' //邮编
          // Toast('Bitte geben Sie die Postleitzahl ein!');
          // return
        } else if (!this.user.city) {
          this.user.city = ''
          // Toast('Bitte geben Sie die Stadt ein!');
          // return
        }
      }
      console.log('提交订单')
      this.$http.post(`${this.$REQ_URL}ctrl=order&action=waiMaiOrder`, {
        is_pick: this.isTakeaway ? 0 : 1,
        shopid: this.$SHOP_ID,
        contactname: this.user.name,
        address: this.user.street,
        postalcode: this.user.postalCode,
        city: this.user.city,
        phone: this.user.phone,
        area1: this.user.stairs,
        area2: this.user.floor,
        area3: this.user.door,
        content: this.remarks,
        paytype: this.payWay[this.selectedIndex].type,
        minit: 81000,
        goodslist: foodList,
        pscost: 0.00,
        email: this.user.email,
        company: this.user.company,
        allcost: this.payTotalPrice,
        discount_rate: this.discount,
        discount: this.totalPriceByDiscount
      })
        .then(res => {
          console.log(res);
          if (!res.data) {
            Toast('Netzwerk-Timeout,Bestellung ist fehlgeschlagen')
            return
          }
          switch (res.data.code) {
            case 1:
              Toast('Bestellung fehlgeschlagen')
              break
            case 5:
              window.alert('Ihre Bestellung wurde bestätigt. Lieferzeit beträgt: 45-90Minuten Vielen Dank')
              if (this.isSaveInfo) {
                localStorage.setItem('user', JSON.stringify(this.user))
              }
              if (this.isSaveRemark) {
                localStorage.setItem('remarks', JSON.stringify(this.remarks))
              } else {
                localStorage.removeItem('remarks')
              }
              this.selectedIndex = ''
              this.isSaveInfo = false
              this.isSaveRemark = false
              this.remarks = ''
              this.EMPTY()
              this.$router.push('/menu')
              break
          }
        }).catch(err => {
          Toast('Netzwerk-Timeout')
        })
    }
  },

}
</script>

<style scoped lang="scss">
@import "../../../static/css/mixin";
.order {
  margin-top: 1.28rem;
  padding-bottom: 0.88rem;
  z-index: 40;
  position: fixed;
  left: 0;
  top: 0;
  @include wh(100%);
  background-color: $fc;
  overflow-y: scroll;
  .big-title {
    padding: 0.38rem 0.48rem;
    @include fscfw(0.48rem, $tc);
    border-bottom: 1px solid #dedede;
  }
  .info {
    padding: 0 0.48rem 0.9rem;
    border-bottom: 1px solid #dedede;
    .title {
      @include fsc(0.32rem, #000);
      padding: 0.26rem 0;
      line-height: 0.44rem;
      font-weight: 600;
    }
    .address-wrapper {
      @include fja();
      padding-bottom: 0.4rem;
      border-bottom: 1px dotted #979797;
      .address-img {
        @include wh(0.32rem, 0.4rem);
      }
      .next-img {
        @include wh(0.32rem, 0.2rem);
      }
      img {
        @include wh(100%);
      }
      .address-info {
        height: 0.9rem;
        flex: 1;
        @include fj();
        flex-direction: column;
        padding: 0 0.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .address,
        .name-phone {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .name-phone {
          color: #969696;
        }
      }
    }
    .new-btn {
      text-align: center;
      margin-top: 0.4rem;
      height: 0.96rem;
      line-height: 0.96rem;
      background: $tc;
      border-radius: 0.08rem;
      font-weight: 600;
      color: $fc;
    }
    .info-wrapper {
      padding-bottom: 0.68rem;
      &:last-child {
        padding-bottom: 0;
      }
      .info-title {
        padding-bottom: 0.18rem;
        span {
          color: red;
        }
      }
      input {
        @include wh(6.54rem, 0.8rem);
        background: rgba(246, 246, 246, 1);
        box-shadow: 0 0.02rem 0.06rem 0 rgba(0, 0, 0, 0.3);
        border-radius: 0.08rem;
      }
    }
    select {
      @include wh(6.54rem, 0.68rem);
      border-radius: 0.08rem;
    }
    .save-remark {
      padding-top: 0.26rem;
      @include fa();
      .save {
        flex: 0 0 0.8rem;
        height: 0.8rem;
        img {
          @include wh(100%);
        }
      }
      span {
        margin-left: 0.28rem;
        flex: 1;
      }
    }
    .remark {
      padding-top: 0.62rem;
      .remark-title {
        padding-bottom: 0.18rem;
        font-weight: bold
      }
      textarea {
        @include wh(6.54rem, 1.92rem);
        padding: 0.2rem;
        background: rgba(246, 246, 246, 1);
        box-shadow: 0 0.02rem 0.06rem 0 rgba(0, 0, 0, 0.3);
        border-radius: 0.08rem;
      }
    }
    .pay-way {
      .way-wrapper {
        @include fja();
        padding-bottom: 0.34rem;
        .left {
          display: flex;
          .icon {
            @include wh(0.4rem);
          }
          .left-name {
            padding-left: 0.18rem;
            height: 0.4rem;
            line-height: 0.4rem;
          }
        }
        .logo {
          @include wh(0.68rem, 0.58rem);
        }
      }
    }
    .pay-cost {
      padding: 0.33rem 0.47rem;
      background: #f6f6f6;
      border-radius: 0.08rem;
      .pay-cost-title {
        font-weight: 600;
        padding-bottom: 0.18rem;
      }
      select {
        @include wh(5.6rem, 0.68rem);
        background: rgba(255, 255, 255, 1);
        border-radius: 0.08rem;
        border: 0.02rem solid rgba(222, 222, 222, 1);
      }
    }
  }
  .discount {
    padding: 0.3rem 0.48rem;
    border-bottom: 1px solid #dedede;
    input {
      @include wh(6.54rem, 0.8rem);
      background: rgba(246, 246, 246, 1);
      box-shadow: 0 0.02rem 0.06rem 0 rgba(0, 0, 0, 0.3);
      border-radius: 0.08rem;
    }
  }
  .make-order {
    padding: 0.36rem 0.48rem 0.48rem;
    .tip {
      font-size: 0.22rem;
      line-height: 0.32rem;
      margin-bottom: 0.3rem;
    }
    .sign-up {
      padding-top: 0.26rem;
      display: flex;
      .save {
        flex: 0 0 0.8rem;
        height: 0.8rem;
      }
      span {
        flex: 1;
        font-size: 0.18rem;
      }
    }
    .btn {
      @include whl(100%, 0.96rem);
      background: $tc;
      color: $fc;
      text-align: center;
      border-radius: 0.08rem;
      border: 1px solid #979797;
      font-weight: 600;
    }
    .privacy {
      margin-top: 0.36rem;
      font-size: 0.22rem;
    }
  }
}
</style>
